<?php
/**
 * Author：晴天 QQ：1186258278
 * Creation：2020/7/14 11:14
 * Filename：admin.Payments.php
 * 支付接口配置
 */
$title = '支付接口配置';
include "header.php";
?>
<div class="layui-row layui-col-space10 p-0" id="app">
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="card">
            <div class="card-header text-white" style="background-color: #5ce4ff;">
                QQ支付通道配置
            </div>
            <div class="card-body p-0">
                <ul class="layui-timeline p-0">
                    <li class="layui-timeline-item" v-for="(item , index) of qqpay" :key="index"
                        :title="item.name + '支付方式！'">
                        <div class="layui-timeline-content layui-text">
                            <h3 v-on:click="Cut(1,item.id)" class="layui-timeline-title"
                                :style="(PayConQQ==item.id?'color:#00b658':'') + ';cursor: pointer;'">{{
                                (PayConQQ==item.id?'已开启':'点击开启') + item.name }}</h3>
                            <div v-if="PayConQQ==item.id" class="layui-form layui-form-pane p-1">
                                <div class="layui-form-item" v-for="(input,index2) of item.input" :key="index2">
                                    <label class="layui-form-label">{{ input }}</label>
                                    <div class="layui-input-block">
                                        <input type="text" v-model="qqpay[index].InputData[index2]"
                                               :placeholder="'请将'+input+'填写完整！'" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <button v-on:click="Save(qqpay[index].InputData,item.id,0)"
                                        class="btn btn-outline-success layui-btn-fluid">保存[{{item.name}}]QQ配置
                                </button>
                            </div>
                        </div>
                    </li>

                    <li class="layui-timeline-item" style="cursor: pointer;" v-on:click="Cut(1,-1)" title="关闭QQ支付通道">
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title" :style="(PayConQQ==-1?'color:#00b658':'')">{{
                                (PayConQQ==-1?'通道已关闭,若要获取更多接口,请前往应用商店安装':'关闭此接口') }}
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="card">
            <div class="card-header bg-success text-white">
                微信支付通道配置
            </div>
            <div class="card-body p-0">
                <ul class="layui-timeline p-0">
                    <li class="layui-timeline-item" v-for="(item , index) of wxpay" :key="index"
                        :title="item.name + '支付方式！'">
                        <div class="layui-timeline-content layui-text">
                            <h3 v-on:click="Cut(2,item.id)" class="layui-timeline-title"
                                :style="(PayConWX==item.id?'color:#00b658':'') + ';cursor: pointer;'">{{
                                (PayConWX==item.id?'已开启':'点击开启') + item.name }}</h3>
                            <div v-if="PayConWX==item.id" class="layui-form layui-form-pane p-2">
                                <div class="layui-form-item" v-for="(input,index2) of item.input" :key="index2">
                                    <label class="layui-form-label">{{ input }}</label>
                                    <div class="layui-input-block">
                                        <input type="text" v-model="wxpay[index].InputData[index2]"
                                               :placeholder="'请将'+input+'填写完整！'" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <button v-on:click="Save(wxpay[index].InputData,item.id,1)"
                                        class="btn btn-outline-success layui-btn-fluid">保存[{{item.name}}]微信配置
                                </button>
                            </div>
                        </div>

                    </li>
                    <li class="layui-timeline-item" style="cursor: pointer;" v-on:click="Cut(2,-1)" title="关闭微信支付通道">
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title" :style="(PayConWX==-1?'color:#00b658':'')">{{
                                (PayConWX==-1?'通道已关闭,若要获取更多接口,请前往应用商店安装':'关闭此接口') }}
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="card">
            <div class="card-header text-white" style="background-color: #0094FF;">
                支付宝支付通道配置
            </div>
            <div class="card-body p-0">
                <ul class="layui-timeline p-0">
                    <li class="layui-timeline-item" v-for="(item , index) of alipay" :key="index"
                        :title="item.name + '支付方式！'">
                        <div class="layui-timeline-content layui-text">
                            <h3 v-on:click="Cut(3,item.id)" class="layui-timeline-title"
                                :style="(PayConZFB==item.id?'color:#00b658':'') + ';cursor: pointer;'">{{
                                (PayConZFB==item.id?'已开启':'点击开启') + item.name }}</h3>
                            <div v-if="PayConZFB==item.id" class="layui-form layui-form-pane p-2">
                                <div class="layui-form-item" v-for="(input,index2) of item.input" :key="index2">
                                    <label class="layui-form-label">{{ input }}</label>
                                    <div class="layui-input-block">
                                        <input type="text" v-model="alipay[index].InputData[index2]"
                                               :placeholder="'请将'+input+'填写完整！'" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <button v-on:click="Save(alipay[index].InputData,item.id,2)"
                                        class="btn btn-outline-success layui-btn-fluid">保存[{{item.name}}]支付宝配置
                                </button>
                            </div>
                        </div>

                    </li>

                    <li class="layui-timeline-item" style="cursor: pointer;" v-on:click="Cut(3,-1)" title="关闭支付宝支付通道">
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title" :style="(PayConZFB==-1?'color:#00b658':'')">{{
                                (PayConZFB==-1?'通道已关闭,若要获取更多接口,请前往应用商店安装':'关闭此接口') }}
                            </div>
                        </div>
                    </li>
                </ul>

                <div class="p-2">Ps：支付宝当面付的自定义商品名称设置为：-1时显示原商品名称！</div>
            </div>
        </div>
    </div>
</div>

<?php include "bottom.php"; ?>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            qqpay: [],
            wxpay: [],
            alipay: [],
            PayConQQ: 'epay',
            PayConWX: -1,
            PayConZFB: -1
        },
        methods: {
            /**
             * @param {Object} Data 配置数据
             * @param {Object} id 应用标识
             * @param {Object} type 类型，0:qq,1:wx,3:zfb
             */
            Save(Data, id, type) {
                console.log(Data);
                let _this = this;
                $.ajax({
                    type: 'POST',
                    url: 'ajax.php?act=SavePayData',
                    data: {
                        data: Data,
                        id: id,
                        type: type
                    },
                    async: true,
                    dataType: 'json',
                    success: function (res) {
                        if (res.code >= 0) {
                            _this.Ajax();
                            layer.alert(res.msg, {icon: 1});
                        } else layer.alert(res.msg, {icon: 2});
                    },
                    error: function () {
                        layer.alert('操作失败！');
                    }
                });
            },
            Cut(type, id) {
                let _this = this;

                let index = layer.confirm('是否要切换?', {icon: 3, title: '温馨提示'}, function (index) {
                    layer.close(index);
                    var index2 = layer.load(1, {time: 9999999999});
                    $.ajax({
                        type: 'POST',
                        url: 'ajax.php?act=PaySet',
                        data: {
                            type: type,
                            id: id
                        },
                        async: true,
                        dataType: 'json',
                        success: function (res) {
                            layer.close(index2);
                            if (res.code >= 0) {
                                _this.Ajax();
                            } else layer.alert(res.msg);
                        },
                        error: function () {
                            layer.close(index2);
                            layer.alert('操作失败！');
                        }
                    });
                });
            },
            Ajax() {
                let _this = this;
                $.ajax({
                    type: 'POST',
                    url: 'ajax.php?act=PayData',
                    async: true,
                    dataType: 'json',
                    success: function (res) {
                        if (res.code >= 0) {
                            _this.renderer(res.data);
                            _this.PayConQQ = res.PayConQQ;
                            _this.PayConWX = res.PayConWX;
                            _this.PayConZFB = res.PayConZFB;
                            _this.$forceUpdate();
                        } else layer.alert(res.msg);
                    },
                    error: function () {
                        layer.alert('用户数据获取失败！');
                    }
                });
            },
            /**
             * 将数据渲染为视图数据
             */
            renderer(data) {
                let _this = this;
                /**
                 * 易支付选择渲染
                 */

                _this.qqpay = [];
                _this.wxpay = [];
                _this.alipay = [];

                for (let i = 0; i < data.length; i++) {
                    if (data[i].type[0] == 1) {
                        let Arr = new Array({
                            id: data[i].id,
                            name: data[i].name,
                            input: data[i].input,
                            InputData: data[i].InputData[0] //载入QQ配置
                        });
                        _this.qqpay.push(Arr[0]);
                    }

                    if (data[i].type[1] == 1) {
                        let Arr = new Array({
                            id: data[i].id,
                            name: data[i].name,
                            input: data[i].input,
                            InputData: data[i].InputData[1] //载入wx配置
                        });
                        _this.wxpay.push(Arr[0]);
                    }

                    if (data[i].type[2] == 1) {
                        let Arr = new Array({
                            id: data[i].id,
                            name: data[i].name,
                            input: data[i].input,
                            InputData: data[i].InputData[2] //载入zfb配置
                        });
                        _this.alipay.push(Arr[0]);
                    }
                }

                console.log(_this.qqpay);
                /**
                 * 编辑器渲染
                 */

                _this.$forceUpdate();
            }
        },
        mounted() {
            this.Ajax();
        }
    });

    layui.use('util', function () {
        var util = layui.util;

        //执行
        util.fixbar({
            bar1: false
        });
    });
</script>
